<template>
  <cs-container :is-back-to-top="true">
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form :model="ruleForm" ref="ruleForm" label-position="top" id="formItem">
            <!-- 搜索框 -->
            <el-form-item prop="name">
              <el-input placeholder="搜索名称、IP" v-model="ruleForm.keyWord" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="searchData"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item prop="groupId" label="资产组:" >
              <treeselect
                v-model="ruleForm.groupId"
                :multiple="true"
                :options="treeselectoptions"
                :flat="true"
                :sort-value-by="sortValueBy"
                :default-expand-level="1"
                @input="searchData"
                placeholder="请选择资产组"
                noOptionsText="目前无数据可显示~"/>
            </el-form-item>
            <el-form-item prop="typeId" label="资产类型:" >
              <treeselect
                v-model="ruleForm.typeId"
                :multiple="true"
                :options="treeselectoption1"
                :flat="true"
                :sort-value-by="sortValueBy"
                :default-expand-level="1"
                @input="searchData"
                placeholder="请选择资产类型"
                noOptionsText="目前无数据可显示~"/>
            </el-form-item>
            <el-form-item prop="tagId" label="资产标签:" >
              <treeselect
                v-model="ruleForm.tagId"
                :multiple="true"
                :options="tagOptions"
                :flat="true"
                :sort-value-by="sortValueBy"
                :default-expand-level="1"
                @input="searchData"
                placeholder="请选择资产标签"
                noOptionsText="目前无数据可显示~"/>
                <!-- <el-select v-model="ruleForm.tagId" placeholder="请选择资产标签" ref="selectReport">
                  <el-option
                    :value="ruleForm.tagId"
                    :label="ruleForm.lable"
                    style="background-color:#fff; height: 200px;">
                    <el-tree
                      :data="tagOptions"
                      :props="defaultProps"
                      expand-on-click-node
                      :show-checkbox="true"
                      check-strictly
                      @check-change="handelInput2"
                      ></el-tree>
                  </el-option>
                </el-select> -->
            </el-form-item>
            <el-form-item prop="assetsLevelId" label="资产等级:" >
              <el-select
                v-model="ruleForm.assetsLevelId"
                placeholder="请选择等保级别"
                multiple
                @change="searchData">
                <el-option
                  v-for="item in option2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 进度条 -->
            <el-form-item class="warring">
              <el-checkbox @change="checkChangeWarring">有警告</el-checkbox>
              <el-slider
                v-model="ruleForm.warningLevel"
                :step="2"
                :max="8"
                show-stops
                :marks="marks"
                :show-tooltip="false"
                :disabled="disabledWarring"
                @input="searchData">
              </el-slider>
            </el-form-item>
            <el-form-item class="warring2">
              <el-checkbox @change="checkChangeValue">资产价值</el-checkbox>
              <el-slider
                v-model="ruleForm.assetsValue"
                :step="1"
                :min="1"
                :max="5"
                :disabled="disabledWarring2"
                show-stops
                :show-tooltip="false"
                @input="searchData"
                :marks="assetsValuemarks">
              </el-slider>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="18">
          <!-- button按钮组 -->
          <div class="button_group">
            <el-button-group>
              <el-popover
                placement="right"
                width="320"
                v-model="visible">
                <p v-for="(item, i) in setTagsData"
                  :key="i">
                  <span class="span-tag">{{item.groupName}}</span>
                  <el-tag
                    v-for="(item2, i) in item.assetsTagEntity"
                    :key="'tag-'+i"
                    @click="sTag(item2)"
                    :color="item2.color">{{item2.name}}</el-tag>
                </p>
                <!-- 选中的标签 -->
                <p>
                  <el-tag
                    v-for="(item3, i) in selectedLabel"
                    :key="'t-'+i"
                    :color="item3.color">{{item3.name}}</el-tag>
                </p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="setLabel">确定</el-button>
                </div>
                <el-button
                  slot="reference"
                  icon="el-icon-collection"
                  size="mini"
                  type="primary"
                  @click="setTags"
                  :disabled="this.ids.length === 0">设置标签</el-button>
              </el-popover>
              <el-button type="primary" icon="el-icon-s-promotion" size="mini">导出资产</el-button>
            </el-button-group>
          </div>
          <!-- 表格区域 -->
          <cs-table :table-data="currentTableData"
                    :table-label="tableLabel"
                    @handleButton="handleButton"
                    @handleSortChange="handleSortChange"
                    @handleSelectionChange="handleSelectionChange"
                    :table-option="tableOption"
                    class="table">
            <template slot="tag" slot-scope="scope">
              <el-tag type="mini"
                v-for='(items, index) in scope.row.assetsTagEntities'
                :key='index'
                :color="items.color">{{items.name}}</el-tag>
            </template>
          </cs-table>
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </cs-container>
</template>

<script>
import {
  getAssetsSearch,
  getAssetsGroupListData,
  inquireTag,
  settingTags
} from '@/api/assets/search.js'
import util from '@/utils/util'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CsTable from '@/components/cs-table'
export default {
  name: 'index1',
  data() {
    return {
      valueConsistsOf: 'LEAF_PRIORITY',
      sortValueBy: 'ORDER_SELECTED',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      ruleForm: {
        keyWord: '',
        groupId: null,
        typeId: null,
        tagId: null,
        assetsLevelId: '',
        warningLevel: 0,
        assetsValue: 0
      },
      // 分页参数
      pageNo: 1,
      pageSize: 10,
      total: 0,
      currentTableData: [],
      tableLabel: [
        { label: '资产名称', param: 'name', align: 'center', sortable: true, isShow: true, width: '120' },
        { label: '资产IP', param: 'ipAddr', align: 'center', isShow: true },
        { label: '资产类型', param: 'assetsTypeName', align: 'center', sortable: false, isShow: true },
        { label: '资产组', param: 'assetsGroupName', align: 'center', sortable: false, isShow: true },
        { label: '资产标签', param: 'tag', align: 'center', sortable: false, slot: true, isShow: true, width: '180' }
      ],
      disabledWarring: true,
      disabledWarring2: true,
      tableOption: {},
      option2: [
        { value: '0', label: '不评级' },
        { value: '1', label: 'S1A1G1' },
        { value: '2', label: 'S2A2G2' },
        { value: '3', label: 'S3A3G3' },
        { value: '4', label: '不评级' },
        { value: '5', label: 'S1A1G1' },
        { value: '6', label: 'S2A2G2' },
        { value: '7', label: 'S3A3G3' },
        { value: '8', label: '不评级' },
        { value: '9', label: 'S1A1G1' }
      ],
      treeselectoptions: [],
      tagOptions: [],
      visible: false,
      setTagsData: [],
      selectedLabel: [],
      ids: [],
      array: [],
      marks: {
        0: '低',
        2: '中低',
        4: '中',
        6: '中高',
        8: '高'
      },
      assetsValuemarks: {
        1: '低',
        2: '中低',
        3: '中',
        4: '中高',
        5: '高'
      },
      treeselectoption1: [
        { id: '0',
          label: 'a',
          children: [{
            id: '1',
            label: 'aa'
          }, {
            id: '2',
            label: 'ab'
          }]
        }, {
          id: '3',
          label: 'b'
        }, {
          id: '4',
          label: 'c'
        }]
    }
  },
  components: {
    CsTable,
    Treeselect
  },
  created() {
    this.searchData()
    this.getAssetsList()
    this.assetsTagVal()
  },
  methods: {
    // 获取资产组数据---数
    getAssetsList() {
      getAssetsGroupListData().then((res) => {
        res.data.forEach(item => {
          item.label = item.groupName
        })
        this.treeselectoptions = util.formatDataToTree(res.data, 'id', 'pid')
      })
    },
    // 搜索查询全部数据
    // search(data) {
    //   getAssetsSearch(data).then((res) => {
    //     this.currentTableData = res.data.rows
    //     this.total = res.data.totalRows
    //   })
    // },
    // 左边条件查询部分
    searchData() {
      const data = {
        keyWord: this.ruleForm.keyWord,
        groupId: this.ruleForm.groupId.join(','),
        typeId: this.ruleForm.typeId.join(','),
        tagId: this.ruleForm.tagId.join(','),
        assetsLevelId: this.ruleForm.assetsLevelId.join(','),
        warningLevel: this.ruleForm.warningLevel,
        assetsValue: this.ruleForm.assetsValue,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      console.log(data, 'data')
      getAssetsSearch(data).then((res) => {
        this.currentTableData = res.data.rows
        this.total = res.data.totalRows
      })
    },
    // // 资产组的查询
    // handelInput(value) {
    //   const data = {
    //     groupId: value.join(','),
    //     pageNo: this.pageNo,
    //     pageSize: this.pageSize
    //   }
    //   this.search(data)
    //   if (this.ruleForm.groupId == null) {
    //     this.searchData()
    //   }
    // },
    // // 资产等级的操作
    // handelChange(val) {
    //   const data = {
    //     assetsLevelId: val.join(','),
    //     pageNo: this.pageNo,
    //     pageSize: this.pageSize
    //   }
    //   this.search(data)
    //   if (this.ruleForm.assetsLevelId === '') {
    //     this.searchData()
    //   }
    // },
    // 警告
    checkChangeWarring(val) {
      if (val === true) {
        this.disabledWarring = false
      } else {
        this.disabledWarring = true
      }
    },
    checkChangeValue(val) {
      if (val === true) {
        this.disabledWarring2 = false
      } else {
        this.disabledWarring2 = true
      }
    },
    // handelwarningLevel(val) {
    //   const data = {
    //     warningLevel: this.ruleForm.warningLevel,
    //     pageNo: this.pageNo,
    //     pageSize: this.pageSize
    //   }
    //   this.search(data)
    // },
    // handelassetsValue(val) {
    //   const data = {
    //     assetsValue: this.ruleForm.assetsValue,
    //     pageNo: this.pageNo,
    //     pageSize: this.pageSize
    //   }
    //   this.search(data)
    // },
    handleButton() {
    },
    handleSortChange() {
    },
    assetsTagVal() {
      inquireTag().then((res) => {
        res.data.forEach(item => {
          item.label = item.groupName
          item.children = item.assetsTagEntity
          item.assetsTagEntity.forEach(element => {
            element.label = element.name
          })
        })
        this.tagOptions = res.data
      })
    },
    // handelInput2(data, type, type2) {
    // handelInput2(val) {
    //   // console.log(data, type, type2)
    //   // if (type === true ) {
    //   //   this.array.push(data)
    //   //   const arr = this.array.map(item => {
    //   //     return item.id
    //   //   })
    //   //   console.log(arr)
    //   // } else {
    //   //   this.array.splice(1)
    //   //   console.log(this.array)
    //   // }
    //   const data = {
    //     tagId: val.join(','),
    //     pageNo: this.pageNo,
    //     pageSize: this.pageSize
    //   }
    //   this.search(data)
    //   if (this.ruleForm.tagId == null) {
    //     this.searchData()
    //   }
    // },
    // handelInputType(val) {
    // },
    // 分页参数的回调
    handleSizeChange(newSize) {
      this.pageSize = newSize
      // this.searchData()
    },
    // 分页参数的回调（页码）
    handleCurrentChange(newPage) {
      this.pageNo = newPage
      // this.searchData()
    },
    // 多选操作
    handleSelectionChange(val) {
      this.ids = val.map(item => {
        return item.id
      })
    },
    // 设置标签
    setTags() {
      inquireTag().then((res) => {
        this.setTagsData = res.data
      })
    },
    sTag(val) {
      this.selectedLabel.push(val)
    },
    setLabel() {
      let tags = []
      tags = this.selectedLabel.map(item => {
        return item.id
      })
      const data = {
        ids: this.ids,
        tags: tags
      }
      settingTags(data).then((res) => {
        this.searchData()
      })
      this.visible = false
      this.selectedLabel = []
    }
  }
}
</script>

<style scoped>
.content{
  padding: 20px;
}
.table{
  padding: 10px 0;
}
.el-form-item{
  margin: 0;
}
.vue-treeselect__input{
  cursor: pointer !important;
}
.el-select{
  width: 100%;
}
.warring {
  margin-top: 10px;
}
.warring2 {
  margin-top: 20px;
}
.el-tag {
  color: #fff;
  cursor: pointer;
}
</style>
